<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <!-- <link
      href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.compat.css"
      rel="stylesheet"
    /> -->
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/animate.min.css" />
    <title>KUGOU</title>
  </head>
  <body>
    <div id="load">
      <div class="rw">
        <img src="./images/load/rw.png" alt="" />
      </div>
      <div class="tip">
        <img
          class="animated fadeInUp"
          src="./images/load/pleaseWearEar.png"
          alt=""
        />
      </div>
      <div id="preText"></div>
    </div>
    <div id="sy">
      <div class="bg">
        <div class="line line1"></div>
        <div class="line line2"></div>
        <div class="line line3"></div>
        <div class="line line4"></div>
        <div class="line line5"></div>
        <div class="line line6"></div>
      </div>
      <div class="logo">
        <img src="./images/index/logo.png" alt="" />
      </div>
      <div class="mouth">
        <div class="mouthimg">
          <img src="./images/index/mouse.png" />
        </div>
        <div class="dog">
          <img src="./images/index/dog.png" />
        </div>
      </div>
      <div class="guess">
        <img src="./images/index/guess.png" alt="" />
      </div>
      <div class="people">
        <img src="./images/index/leftp.png" alt="" />
        <img src="./images/index/rightp.png" alt="" />
      </div>
      <div class="btn">
        <img class="animated tada infinite" src="./images/index/btn.png" />
      </div>
    </div>
    <div class="option">
      <ul id="opt">
        <li><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
      </ul>
      <div class="djs">
        <p id="dj">60s</p>
        <img src="./images/file/jt.png" alt="" />
      </div>
    </div>
    <div class="tp">
      <p>请先听2s</p>
    </div>

    <div class="main">
      <audio id="song" src="" loop></audio>
      <div class="swiper-container swiper-no-swiping">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div id="film">
              <div class="jz">
                <img
                  class="ani"
                  swiper-animate-effect="pulse"
                  src="./images/file/movieHitSong.png"
                />
              </div>
              <div class="char">
                <img
                  class="ani"
                  swiper-animate-effect="fadeInDown"
                  src="images/file/movieHitSongpeople.png"
                />
              </div>
              <div class="char-1">
                <img src="images/file/movieHitSongCityWall.png" alt="" />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div id="rock">
              <div class="bg">
                <div class="line line1"></div>
                <div class="line line2"></div>
                <div class="line line3"></div>
                <div class="line line4"></div>
                <div class="line line5"></div>
                <div class="line line6"></div>
              </div>
              <div class="dd">
                <img  class="ani"
                swiper-animate-effect="flash"
                src="./images/classic/lightearth.png" alt="" />
              </div>
              <div class="rac">
                <img src="./images/rock/bg.png" alt="" />
              </div>
              <div class="rac-1">
                <img
                  class="ani"
                  swiper-animate-effect="zoomIn"
                  src="./images/rock/rw.png"
                />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div id="classic">
              <div class="floor">
                <img src="./images/classic/WCwalls.png" alt="" />
              </div>
              <div class="dd">
                <img src="./images/classic/lightearth.png" alt="" />
              </div>
              <div class="lp">
                <img class="ani" swiper-animate-effect="bounceInLeft" src="./images/classic/watchpeos.png" alt="" />
              </div>
              <div class="db">
                <img src="./images/classic/sangBan1.png" alt="" />
                <img src="./images/classic/sangBan2.png" alt="" />
              </div>
              <div class="zr">
                <img src="./images/classic/jianfeizaode.png" alt="" />
                <img
                  class="ani"
                  swiper-animate-effect="bounceInDown"
                  src="./images/classic/feiZhao.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div id="rb">
              <div class="dd">
                <img src="./images/classic/lightearth.png" alt="" />
              </div>
              <div class="yao">
                <img
                  class="ani"
                  swiper-animate-effect="swing"
                  src="./images/rb/R&B.png"
                  alt=""
                />
              </div>
              <div class="car">
                <img
                  class="ani"
                  swiper-animate-effect="wobble"
                  src="./images/rb/car.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div id="old">
              <div class="dd">
                <img src="./images/classic/lightearth.png" alt="" />
              </div>
              <div class="laba">
                <img
                  class="ani"
                  swiper-animate-effect="pulse"
                  src="./images/old/juhualeft.png"
                  alt=""
                />
                <img
                  class="ani"
                  swiper-animate-effect="pulse"
                  src="./images/old/juhuaright.png"
                  alt=""
                />
              </div>
              <div class="ns">
                <img src="./images/old/ns.png" alt="" />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div id="pop">
              <div class="yj">
                <img
                  class="ani"
                  swiper-animate-effect="flash"
                  src="./images/pop/hy.png"
                  alt=""
                />
              </div>
              <div class="qh">
                <img class="ani" swiper-animate-effect="fadeInLeft" src="./images/pop/man.png" alt="" />
                <img src="./images/pop/wuman.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="resul">
      <div class="top">
        <div class="user">
          <div class="tx">
            <img src="./images/resul/tx.png" alt="" />
          </div>
          <p>咸猪手</p>
        </div>
        <div class="logo">
          <img src="./images/index/logo.png" alt="" />
        </div>
      </div>
      <div class="prize">
        <img class="animated pulse infinite" src="./images/resul/baiy.png" alt="" />
      </div>
      <div class="guess">
        <p id="res-guess"></p>
      </div>
      <div class="info">
        <p>
          失敬失敬！十二星座黄金“音”斗士，你是哪一宫？向你的基友们寄送挑战书吧！
        </p>
      </div>
      <div class="share">
        <div class="zc">
          <img class="animated slideInLeft" src="./images/resul/again.png" alt="" />
        </div>
        <div class="fx">
          <img class="animated slideInRight" src="./images/resul/friend.png" alt="" />
        </div>
      </div>
      <div class="pm"></div>
    </div>

    <script src="./js/rem.js"></script>
    <!-- <script src="./js/preloadjs.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/PreloadJS/1.0.1/preloadjs.js"></script>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/swiper.animate1.0.3.min.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>
